<template>
  <div>
    <van-row>
      <van-nav-bar
          title="评价中心"
          fixed
          placeholder
          left-text="返回"
          @click-left="onCancel"
      >
        <template #left>
          <van-icon   color="black" size="22" name="arrow-left" />
        </template>
      </van-nav-bar>
      <van-col span="24" style="margin-top: 1rem;">
        <van-cell-group inset>
          <van-cell :border="false">
            <template #icon>
              <van-image
                  width="60"
                  height="60"
                  lazy-load
                  round
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </template>
            <template #title>
                <span style="font-size: 1.5em;  padding-left: 1rem;">Herther</span>
            </template>
            <template #label>
              <span style="font-size: 1em; padding-left: 1rem;">持续评价可获得更多激励</span>
            </template>
          </van-cell>
        </van-cell-group>
      </van-col>
      <van-col span="24" >
        <van-tabs v-model="active" background="#f7f8fa">
          <van-tab :title="`待评价(`+3+`)`">
            <van-cell-group  v-for="i in 3" inset style="margin-top: .3rem;">
              <van-cell @click="toEvaluate" :border="false" is-link >
                <template #icon>
                  <van-image
                      style="padding-right: 10px;"
                      width="40"
                      height="40"
                      :lazy-load="true"
                      fit="fill"
                      src="https://gitee.com/herther/img/raw/master/img/20210912143504.png"
                  />
                </template>
                <template #title>
                  <span style="font-size: 1.2em; font-weight: bold;">华莱士(工学院店)</span>
                </template>
                <template #label>
                  <van-grid :border="false">
                    <van-grid-item >
                      <template #icon>
                        <van-image
                            width="50"
                            height="50"
                            :lazy-load="true"
                            fit="fill"
                            src="https://gitee.com/herther/img/raw/master/img/20210914161025.png"
                        />
                      </template>
                      <template #text>
                        <span style="font-size: 1em;  overflow: hidden;white-space: nowrap; text-overflow:ellipsis;">双人餐汉堡</span>
                      </template>
                    </van-grid-item>
                    <van-grid-item >
                      <template #icon>
                        <van-image
                            width="50"
                            height="50"
                            :lazy-load="true"
                            fit="fill"
                            src="https://gitee.com/herther/img/raw/master/img/20210915171138.png"
                        />
                      </template>
                      <template #text>
                        <span style="font-size: 1em;  overflow: hidden;white-space: nowrap; text-overflow:ellipsis;">香辣鸡腿堡大可</span>
                      </template>
                    </van-grid-item>
                  </van-grid>
                </template>
              </van-cell>
              <van-cell title="2021-09-13">
                    <template #default>
                      <span>共2件</span>
                      <span style="color: #f52443; font-weight: bold; font-size: 1.3em;">￥27.5</span>
                    </template>
              </van-cell>
            </van-cell-group>
          </van-tab>
          <van-tab title="已评价">

            <van-cell-group v-show="true"  inset style="margin-top: .3rem;">
              <van-cell :border="false"  value="2021-09-13">
                <template #icon>
                  <van-image
                      style="padding-right: 10px;"
                      width="40"
                      height="40"
                      :lazy-load="true"
                      fit="fill"
                      src="https://gitee.com/herther/img/raw/master/img/20210912143504.png"
                  />
                </template>
                <template #title>
                  <span style="font-size: 1.2em; font-weight: bold;">华莱士(工学院店)</span>
                </template>
              </van-cell>
              <van-cell :border="false">
                <template #title>
                  <span style="display: flex;align-items: center;">
                    <span style="font-size: 1.2em;">商家</span>
                    <van-rate color="#ffd21e" size="1.4em"  allow-half style="padding-left: .3rem;" readonly v-model="value" />
                    <span style="padding-left: 10px; font-size: 1em;">{{value}}分</span>
                  </span>
                </template>
              </van-cell>
              <van-cell :border="false">
                  <span style="margin-bottom: 10px;  display: block;"> 好吃，挺不错 </span>
                <van-grid :border="false" :gutter="10">
                  <van-grid-item>
                      <template #icon>
                        <van-image
                            @click="proview"
                            width="50"
                            height="50"
                            :lazy-load="true"
                            fit="fill"
                            src="https://gitee.com/herther/img/raw/master/img/20210914105900.png"
                        />
                        <van-image-preview v-model="shuowImg" :images="images"  @change="onChange">
                          <template v-slot:index>第{{ index }}页</template>
                        </van-image-preview>
                      </template>
                  </van-grid-item>
                  <van-grid-item>
                    <template #icon>
                      <van-image
                          width="50"
                          height="50"
                          :lazy-load="true"
                          fit="fill"
                          src="https://gitee.com/herther/img/raw/master/img/20210914105900.png"
                      />
                    </template>
                  </van-grid-item>

                  <van-grid-item>
                    <template #icon>
                      <van-image
                          width="50"
                          height="50"
                          :lazy-load="true"
                          fit="fill"
                          src="https://gitee.com/herther/img/raw/master/img/20210914105900.png"
                      />
                    </template>
                  </van-grid-item>
                  <van-grid-item>
                    <template #icon>
                      <van-image
                          width="50"
                          height="50"
                          :lazy-load="true"
                          fit="fill"
                          src="https://gitee.com/herther/img/raw/master/img/20210914105900.png"
                      />
                    </template>
                  </van-grid-item>

                </van-grid>
              </van-cell>
              <van-cell  value="2021-09-15">
                 <template #title>
                   <span style="font-size: 1.2em; color: black;">商家回复</span>
                 </template>
                  <template #label>
                      <span>感谢你的评价物品，我们会更加努力的</span>
                  </template>
              </van-cell>
              <van-cell :border="false" title="">
                <template #right-icon>
                  <van-button @click="editEvalute" type="info" plain hairline size="mini">
                    <template #icon>
                      <icon-svg icon-class="my-icon-xiugai"></icon-svg>
                    </template>
                    修改
                  </van-button>
                  <van-button @click="deleteEvaluate" type="info" plain hairline size="mini">
                    <template #icon>
                      <icon-svg  icon-class="my-icon-shanchu"></icon-svg>
                    </template>
                    删除
                  </van-button>
                </template>
              </van-cell>
            </van-cell-group>
          </van-tab>
        </van-tabs>
      </van-col>
    </van-row>
    </div>
</template>

<script>
export default {
  name: "Evaluate",
  data(){
    return{
      active:0,
      isError:false,
      value:4.5,
      shuowImg:false,
      index:1,
      images: [
        'https://gitee.com/herther/img/raw/master/img/20210914105900.png',
        'https://gitee.com/herther/img/raw/master/img/20210914105900.png',
        'https://gitee.com/herther/img/raw/master/img/20210914105900.png',
        'https://gitee.com/herther/img/raw/master/img/20210914105900.png',

      ],
    }
  },
  methods:{
    onCancel(){
      this.$router.replace("/Info")
    },
    onChange(index) {
      this.index = index;
    },
    proview(){
      this.shuowImg = true;
    },
    editEvalute(){
      console.log("aaa")
    },
    toEvaluate(){
      this.$router.replace("/editEvalute")
    },
    deleteEvaluate(){
      console.log("aaa")
      this.$dialog.confirm({
        message: '确认删除改评价',
      }).then(() => {

      });
    }
  }
}
</script>

<style scoped>

</style>
